<template>
  <div class="w-100% h-100%">
    <div class="mb-10px">
      <ContentWrap :show-border="false">
        <el-form label-width="100px" label-position="top" :model="form" :rules="rules">
          <div>
            <div class="bg-#F7F7FB p-10px rounded-6px">
              <p class="set-title">
                <span class="font-semibold">价格和库存</span>
                <span class="text-#8F8F8F text-xs">（设置商品规格信息）</span>
              </p>
            </div>
            <div class="mt-4">
              <el-row :gutter="24">
                <el-col :span="6" v-for="(item, index) in formColumns1" :key="index">
                  <el-form-item :label="item.label" :prop="item.code">
                    <el-input
                      v-if="item.type === 'inputNum'"
                      v-model="form[item.code]"
                      placeholder="请输入"
                    >
                      <!-- @input="handleGetForm" -->
                      <template #suffix>元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否开启套餐">
                    <div>
                      <el-switch
                        v-model="form.thaliFlag"
                        active-color="#3721FF"
                        inactive-color="#DCDFE6"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleGetForms"
                      />
                      <p class="text-[12px] text-[#8F8F8F]"
                        >开启此功能将激活套餐设置字段，用于配置组合商品套餐规则</p
                      >
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="商品规格" required>
                    <div>
                      <el-switch
                        v-model="isProperty"
                        active-color="#3721FF"
                        inactive-color="#DCDFE6"
                        @change="handleGetForms"
                        :disabled="specificationList.length > 0"
                      />
                      <p class="text-[12px] text-[#8F8F8F]">
                        平台已根据类目商品定义标准化的规格信息，例如：
                        <span class="text-[#3721FF]">颜色、尺寸</span>
                      </p>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-show="isProperty">
                <Specification
                  :isProperty="isProperty"
                  ref="specificationRef"
                  :specificationList="specificationList"
                  :form-data="props.formData"
                />
              </div>
            </div>
          </div>
          <!-- </ContentWrap> -->
        </el-form>
      </ContentWrap>
    </div>
  </div>
</template>

<script setup lang="ts">
import Specification from './specification.vue'
const emit = defineEmits(['update:form', 'update:tableData','isthaliFlag'])
const specificationRef = ref()
const isProperty = ref(false)
const props = defineProps(['formData'])
import { rules, ProductVO } from '@/api/product/addProduct/index.ts'
import { ProductApi } from '@/api/product/addProduct'
import { deepCopy } from '@/utils'

// const rules = reactive({
//   originalPrice: [
//     {
//       required: true,
//       message: '请输入原价',
//       trigger: 'blur'
//     }
//   ]
// })
const form = ref({
  originalPrice: '',
  thaliFlag: 0
})
const specificationList = ref<ProductVO[]>([])
const getRuleAttribute = (id) => {
  ProductApi.getByProductId({ productId: id }).then((res) => {
    console.log('getRuleAttribute', res)
    isProperty.value = res.length > 0
    specificationList.value = res
  })
}
const updateTableData = (val) => {
  console.log('updateTableData', val)
  emit('update:tableData', val)
}
//
const handleGetForms = () => {
  // let demo = deepCopy(form.value)
  // if(!isProperty.value){
  //   specificationList.value= []
  // }
  emit('isthaliFlag', {
    thaliFlag:form.value.thaliFlag,
    originalPrice:form.value.originalPrice,
    discountedPrice:form.value.discountedPrice
  })
}
// 业务设置
const formColumns1 = ref([
  {
    label: '原价',
    code: 'originalPrice',
    type: 'inputNum',
    required: true
  },
  {
    label: '折扣价',
    code: 'discountedPrice',
    type: 'inputNum',
    required: true
  }
])
const updateRuleAttribute = () => {
  return specificationRef.value?.updateTableData()
}
onMounted(() => {})
// 回显form
watch(
  () => props.formData,
  (val) => {
    // form.value.thaliFlag = val.thaliFlag == '1' ? true : false
    nextTick(() => {
      form.value = deepCopy(val)
    })
  }
)
watch(
  () => specificationRef.value?.getTableData(),
  (val) => {
    emit('update:tableData', val)
  }
)

defineExpose({
  handleGetForms,
  getRuleAttribute,
  updateRuleAttribute
})
</script>

<style scoped>
.set-title {
  border-left: 4px solid #3721ff;
  padding-left: 10px;
  font-size: 14px;
  /* font-weight: 600; */
  display: block;
  height: 14px;
  line-height: 14px;
}
</style>
